<template>
	<div class="container">
		<!-- 表单 -->
		<el-form class="login-container" label-position="right" label-width="65px">
			<h3 class="login_title">平台管理系统</h3>
			<el-form-item label="用户名">
				<el-input type="text" v-model="loginForm.username" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
			</el-form-item>
			<el-row justify="center">
				<el-button type="primary" style="width: 50%" @click="onBtnLogin" :disabled="available">登录</el-button>
			</el-row>
		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				//用户名与密码
				loginForm: {
					username: 'admin',
					password: '123456'
				}
			}
		},
		computed: {
			available() {
				if (this.loginForm.username.length > 0 && this.loginForm.password.length > 0) {
					return false
				}
				return true
			}
		},
		methods: {
			// 登录按钮 
			onBtnLogin() {
				let _this = this;
				_this.$axios({
					method: 'post',
					url: '/manager/login',
					data: {
						username: _this.loginForm.username,
						password: _this.$rsaEncrypt(_this.loginForm.password)
					}
				}).then((resp) => {
					if (resp.code == 200) {
						_this.$message.success(resp.msg)
						let manager = resp.data
						//保存用户；1s为1秒，1min为1分钟，1h为1小时，1d为1天，字符均忽略大小写
						_this.$cookies.set("manager", manager, "3d")
						_this.$router.replace('/home')
					}
					if (resp.code == 500) {
						_this.$message.error(resp.msg)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		position: fixed;
		background-image: url(../assets/sky.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* 表单 */
	.login-container {
		float: right;
		width: 267px;
		height: 100%;
		padding: 20px 50px;
		background: #aaffff;
		border: 1px solid #eaeaea;
	}

	/* 系统登录标题 */
	.login_title {
		margin: 70px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.login_remember {
		margin: 0px 0px 35px 0px;
		text-align: left;
	}
</style>
